<template>
  <n-card class="rounded-16px shadow-sm">
    <n-space class="pb-12px" justify="space-between">
      <n-button type="error" @click="clearData">
        <icon-ic-round-delete class="mr-4px text-20px" />
        清空数据
      </n-button>
      <n-button v-if="showBegin" strong secondary round type="info" @click="startTask"> 开始干活 </n-button>

      <n-button v-else strong secondary round type="success" @click="setTrue"> 完成任务 </n-button>
      <n-button type="success" @click="setStoreTrue">
        <icon-uil:save class="mr-4px text-20px" />
        保存数据
      </n-button>
    </n-space>
    <n-data-table :columns="columns" :data="data" />

    <finish-modal title="任务信息" :show="show" @close-modal="setFalse" @postive-click="setTaskInfo" />
    <store-modal title="保存数据" :show="store" @close-modal="setStoreFalse" @postive-click="getDate" />
  </n-card>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useBoolean } from '@/hooks';
import { getTodayData, insert, clearData, data, columns, finishTask, startTask, storeData } from './assets/data';
import { FinishModal, StoreModal } from './components';
import type { TaskInfo } from './assets/type';

const showBegin = computed(() => {
  return !data.value[0].range[0];
});

const { bool: show, setTrue, setFalse } = useBoolean(false);
const { bool: store, setTrue: setStoreTrue, setFalse: setStoreFalse } = useBoolean(false);

const setTaskInfo = (formValue: TaskInfo) => {
  const index = finishTask();
  if (!data.value[index].name) {
    data.value[index].name = formValue.name;
  }
  if (!data.value[index].type) {
    data.value[index].type = formValue.type;
  }
  storeData();
  setFalse();
};

/**
 * 获取保存数据的日期
 */
const getDate = async (value: number) => {
  const today = getTodayData(value);
  await insert(today);
  setStoreFalse();
};
</script>
